<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container" id="app">
    <h1 class="text-center">接口测试用例输入</h1>

    <form class="form-horizontal">

        <div class="form-group">
            <label class="col-sm-2 control-label">用例名称</label>
            <div class="col-sm-10">
                <input v-model="caseName" type="text" class="form-control" placeholder="用例名称">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">请求地址</label>
            <div class="col-sm-10">
                <input v-model="request.requestPath" type="text" class="form-control" placeholder="请求地址">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">请求方法</label>
            <div class="col-sm-10">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                            data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        GET
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#">GET</a></li>
                        <li><a href="#">POST</a></li>
                        <li><a href="#">PUT</a></li>
                        <li><a href="#">DELETE</a></li>
                        <li><a href="#">HEAD</a></li>
                        <li><a href="#">TRACE</a></li>
                        <li><a href="#">OPTIONS</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">请求头</label>
            <div class="col-sm-10">
                <textarea v-model="request.requestHeader" class="form-control" rows="5"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">请求依赖</label>
            <div class="col-sm-10">
                <textarea class="form-control" rows="5"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">请求体</label>
            <div class="col-sm-10">
                <textarea v-model="request.requestBody" class="form-control" rows="5" placeholder="请求体"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">响应断言</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputEmail5" placeholder="Password">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default" @click='save'>save</button>
            </div>
        </div>
    </form>
</div>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    //    Vue.prototype.$http = axios
    new Vue({
        el: '#app',
        data: {
            caseName: '新增岗位',
            request: {
                requestPath: '/addcase',
                requestMethod: 'post',
                requestHeader: 'json',
                requestBody: {'name': 'zhangsan'}
            },
            extractBinds: [],
            validators: []
        },
        methods: {
            save: function () {
                axios.post('http://192.168.18.2/addCase', {
                    "case": {
                        "name": "zhangsan",
                        "age": 21
                    }
                })
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }

        }
    })
</script>
</body>
</html>